<template>
  <div class="app-container">
    <el-card shadow="hover">
      <div>
        <i class="el-icon-tickets"></i>
        <span> 关于我们</span>
      </div>
      <div class="form">
        <el-form ref="form" :model="form" :rules="rules" label-width="110px">
          <el-row>
            <el-col :span="18">
              <el-form-item label="公司名称:" prop="companyName">
                <el-input v-model="form.companyName" placeholder="请填写公司名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="18">
              <el-form-item label="手机号码:" prop="phone">
                <el-input v-model="form.phone" placeholder="请填写公司手机号码"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="18">
              <el-form-item label="固定号码:" prop="telephone">
                <el-input v-model="form.telephone" placeholder="请填写公司固定电话"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="18">
              <el-form-item label="邮箱:" prop="email">
                <el-input v-model="form.email" placeholder="请填写公司邮箱"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="18">
              <el-form-item label="微信号:" prop="qq">
                <el-input v-model="form.qq" placeholder="请填写微信号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="22">
              <el-form-item label="微信二维码:" prop="qrCode">
                <el-upload
                  :headers="headers"
                  :action="`${baseUrl}/cms/company/upload`"
                  :show-file-list="false"
                  :on-success="handleSuccess"
                  class="avatar-uploader"
                  accept=".jpg,.jpeg,.png,.gif"
                >
                  <img v-if="form.qrCode" :src="showUrl + form.qrCode" class="avatar" />
                  <i v-else class="el-icon-plus avatar-uploader-icon" />
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="22">
              <el-form-item label="公司地址:" prop="address">
                <el-input v-model="form.address" placeholder="请填写公司地址"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer">
          <el-button type="primary" size="small" icon="el-icon-circle-check" @click="submitForm">保存</el-button>
          <el-button type="danger" size="small" plain @click="cancel">取消</el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import Editor from "@/components/Editor";
import { getToken } from "@/utils/auth";
import {
  queryCompanyInfo,
  addCompanyInfo,
  updateCompanyInfo
} from "@/api/web/index";

export default {
  name: "About",
  components: {
    Editor
  },
  data() {
    return {
      headers: { Authorization: "Bearer " + getToken() },
      baseUrl: process.env.VUE_APP_BASE_API,
      // 遮罩层
      loading: true,
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        companyName: [
          { required: true, message: "公司名称不能为空", trigger: "blur" }
        ],
        phone: [
          { required: true, message: "手机号码不能为空", trigger: "blur" }
        ],
        telephone: [
          { required: true, message: "固定电话不能为空", trigger: "blur" }
        ],
        email: [
          { required: true, message: "邮箱不能为空", trigger: "blur" }
        ],
        qq: [
          { required: true, message: "微信号不能为空", trigger: "blur" }
        ],
        qrCode: [
          { required: true, message: "微信二维码不能为空", trigger: "blur" }
        ],
        address: [
          { required: true, message: "公司地址不能为空", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.loading = true;
      queryCompanyInfo({
        pageNum: 1,
        pageSize: 10,
        type:1,
      }).then(res => {
        this.form = res.rows[0];
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.getList();
    },
    handleSuccess(res){
      this.form.qrCode = res.data;
    },
    // 保存修改
    submitForm() {
      this.$refs['form'].validate(valid => {
        if(valid){
          console.log(this.form)
          updateCompanyInfo(this.form).then(res => {
            if(res.code == 200){
              this.msgSuccess('保存成功');
              this.getList();
            }
          })                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             
        }
      })
    }
  }
};
</script>

<style scoped lang="scss">
// @import "_upload.css";
.form {
  margin-top: 20px;
}
.avatar-uploader .el-upload {
  width: 130px;
  height: 130px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #20a0ff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 130px;
  height: 130px;
  line-height: 130px;
  text-align: center;
  border: 1px dashed #d9d9d9;
}

.avatar {
  width: 130px;
  height: 130px;
  display: block;
}
</style>
